<template>
	<div class="body">
		<div class="fixed">
			<div class="header">
				<router-link to="/home">
					<img src="static/menpiaoimg/z022xpzykj1rijptdmqhabbabw4e3hdn.png">
				</router-link>
				<p>景点门票</p>
				<div>
					<router-link to="/home">
						<img src="static/menpiaoimg/cibt8b2ra7am1h45slxx86xamv93xg4n.png">
					</router-link>
					<a href="javascript:;">
						<img src="static/menpiaoimg/c2zdhr6djr5g7luvt7a8bhchnvt24ize.png">
					</a>
				</div>
			</div>
			<div class="search">
				<div class="search_div">
					<a href="javascript:;" class="after">
						北京<span></span>
					</a>
					<a href="javascript:;" class="input">
						<input type="text" placeholder="景点名称/城市/主体">
					</a>
				</div>
			</div>
		</div>
		<div class="slide">
			<img src="static/menpiaoimg/1503050758_72672.jpg">
		</div>
		<div class="tatle border_bottom">
			<p>人气必玩</p>
			<p><a href="javascript:;">北京全部景点<span></span></a></p>
		</div>
		<div class="box">
			<div class="scroll_x">
				<a href="javascript:;">
					<img src="static/menpiaoimg/1493032652_80273.jpg">
					<span class="scroll_x_position">今日订</span>
					<div>
						<p>古北水镇</p>
						<p class="p"><span>￥100</span>起</p>
					</div>
				</a>
				<a href="javascript:;">
					<img src="static/menpiaoimg/1493032652_80273.jpg">
					<span class="scroll_x_position">今日订</span>
					<div>
						<p>古北水镇</p>
						<p class="p"><span>￥100</span>起</p>
					</div>
				</a>
				<a href="javascript:;">
					<img src="static/menpiaoimg/1493032652_80273.jpg">
					<span class="scroll_x_position">今日订</span>
					<div>
						<p>古北水镇</p>
						<p class="p"><span>￥100</span>起</p>
					</div>
				</a>
				<a href="javascript:;">
					<img src="static/menpiaoimg/1493032652_80273.jpg">
					<span class="scroll_x_position">今日订</span>
					<div>
						<p>古北水镇</p>
						<p class="p"><span>￥100</span>起</p>
					</div>
				</a>
				<a href="javascript:;">
					<img src="static/menpiaoimg/1493032652_80273.jpg">
					<span class="scroll_x_position">今日订</span>
					<div>
						<p>古北水镇</p>
						<p class="p"><span>￥100</span>起</p>
					</div>
				</a>
				<a href="javascript:;">
					<img src="static/menpiaoimg/1493032652_80273.jpg">
					<span class="scroll_x_position">今日订</span>
					<div>
						<p>古北水镇</p>
						<p class="p"><span>￥100</span>起</p>
					</div>
				</a>
				<a href="javascript:;">
					<img src="static/menpiaoimg/1493032652_80273.jpg">
					<span class="scroll_x_position">今日订</span>
					<div>
						<p>古北水镇</p>
						<p class="p"><span>￥100</span>起</p>
					</div>
				</a>
				<a href="javascript:;">
					<img src="static/menpiaoimg/1493032652_80273.jpg">
					<span class="scroll_x_position">今日订</span>
					<div>
						<p>古北水镇</p>
						<p class="p"><span>￥100</span>起</p>
					</div>
				</a>
				<a href="javascript:;">
					<img src="static/menpiaoimg/1493032652_80273.jpg">
					<span class="scroll_x_position">今日订</span>
					<div>
						<p>古北水镇</p>
						<p class="p"><span>￥100</span>起</p>
					</div>
				</a>
			</div>
		</div>
		<div class="banner margin_top">
			<a href="javascript:;">
				<img src="static/menpiaoimg/1500598362_97953.jpg">
			</a>
		</div>
		<div class="menu margin_top">
			<p class="border_bottom">精选主题</p>
			<div class="flex">
				<div>
					<a href="javascript:;">
						<img src="static/menpiaoimg/1499237172_48310.png">
						<p>漂流戏水</p>
					</a>
					<a href="javascript:;">
						<img src="static/menpiaoimg/1499237172_48310.png">
						<p>漂流戏水</p>
					</a>
					<a href="javascript:;">
						<img src="static/menpiaoimg/1499237172_48310.png">
						<p>漂流戏水</p>
					</a>
					<a href="javascript:;">
						<img src="static/menpiaoimg/1499237172_48310.png">
						<p>漂流戏水</p>
					</a>
					<a href="javascript:;">
						<img src="static/menpiaoimg/1499237172_48310.png">
						<p>漂流戏水</p>
					</a>
					<a href="javascript:;">
						<img src="static/menpiaoimg/1499237172_48310.png">
						<p>漂流戏水</p>
					</a>
					<a href="javascript:;">
						<img src="static/menpiaoimg/1499237172_48310.png">
						<p>漂流戏水</p>
					</a>
					<a href="javascript:;">
						<img src="static/menpiaoimg/1499237172_48310.png">
						<p>漂流戏水</p>
					</a>
				</div>
			</div>
		</div>
		<div class="content margin_top">
			<div class="tatle">
				<p>热门景点</p>
				<p><a href="javascript:;">附近景点<span></span></a></p>
			</div>
			<div>
				<div class="play">
					<a href="javascript:;">
						<img src="static/menpiaoimg/371e5cce-0032-402e-8ff9-852372588788_480_320.jpg">
						<img src="static/menpiaoimg/sign2.png" class="play_position1">
						<div>
							<p style="margin: 0;">北京欢乐谷</p>
							<p>
								<span class="span1">驴悦亲子</span>
								<span class="span2">优惠</span>
								<span class="span2">反￥5</span>
							</p>
							<p>95.8%满意</p>
							<p style="font-size: .3rem;color: #aaaaaa;">北京 朝阳区 4A景区</p>
						</div>
						<div class="play_position2">
							<p>￥<span style="font-size: .6rem;color:#d30775;">39.9</span>起</p>
							<del>￥260</del>
						</div>
					</a>
				</div>
				<div class="play">
					<a href="javascript:;">
						<img src="static/menpiaoimg/371e5cce-0032-402e-8ff9-852372588788_480_320.jpg">
						<img src="static/menpiaoimg/sign2.png" class="play_position1">
						<div>
							<p style="margin: 0;">北京欢乐谷</p>
							<p>
								<span class="span1">驴悦亲子</span>
								<span class="span2">优惠</span>
								<span class="span2">反￥5</span>
							</p>
							<p>95.8%满意</p>
							<p style="font-size: .3rem;color: #aaaaaa;">北京 朝阳区 4A景区</p>
						</div>
						<div class="play_position2">
							<p>￥<span style="font-size: .6rem;color:#d30775;">39.9</span>起</p>
							<del>￥260</del>
						</div>
					</a>
				</div>
				<div class="play">
					<a href="javascript:;">
						<img src="static/menpiaoimg/371e5cce-0032-402e-8ff9-852372588788_480_320.jpg">
						<img src="static/menpiaoimg/sign2.png" class="play_position1">
						<div>
							<p style="margin: 0;">北京欢乐谷</p>
							<p>
								<span class="span1">驴悦亲子</span>
								<span class="span2">优惠</span>
								<span class="span2">反￥5</span>
							</p>
							<p>95.8%满意</p>
							<p style="font-size: .3rem;color: #aaaaaa;">北京 朝阳区 4A景区</p>
						</div>
						<div class="play_position2">
							<p>￥<span style="font-size: .6rem;color:#d30775;">39.9</span>起</p>
							<del>￥260</del>
						</div>
					</a>
				</div>
				<div class="play">
					<a href="javascript:;">
						<img src="static/menpiaoimg/371e5cce-0032-402e-8ff9-852372588788_480_320.jpg">
						<img src="static/menpiaoimg/sign2.png" class="play_position1">
						<div>
							<p style="margin: 0;">北京欢乐谷</p>
							<p>
								<span class="span1">驴悦亲子</span>
								<span class="span2">优惠</span>
								<span class="span2">反￥5</span>
							</p>
							<p>95.8%满意</p>
							<p style="font-size: .3rem;color: #aaaaaa;">北京 朝阳区 4A景区</p>
						</div>
						<div class="play_position2">
							<p>￥<span style="font-size: .6rem;color:#d30775;">39.9</span>起</p>
							<del>￥260</del>
						</div>
					</a>
				</div>
				<div class="play">
					<a href="javascript:;">
						<img src="static/menpiaoimg/371e5cce-0032-402e-8ff9-852372588788_480_320.jpg">
						<img src="static/menpiaoimg/sign2.png" class="play_position1">
						<div>
							<p style="margin: 0;">北京欢乐谷</p>
							<p>
								<span class="span1">驴悦亲子</span>
								<span class="span2">优惠</span>
								<span class="span2">反￥5</span>
							</p>
							<p>95.8%满意</p>
							<p style="font-size: .3rem;color: #aaaaaa;">北京 朝阳区 4A景区</p>
						</div>
						<div class="play_position2">
							<p>￥<span style="font-size: .6rem;color:#d30775;">39.9</span>起</p>
							<del>￥260</del>
						</div>
					</a>
				</div>
				<div class="play">
					<a href="javascript:;">
						<img src="static/menpiaoimg/371e5cce-0032-402e-8ff9-852372588788_480_320.jpg">
						<img src="static/menpiaoimg/sign2.png" class="play_position1">
						<div>
							<p style="margin: 0;">北京欢乐谷</p>
							<p>
								<span class="span1">驴悦亲子</span>
								<span class="span2">优惠</span>
								<span class="span2">反￥5</span>
							</p>
							<p>95.8%满意</p>
							<p style="font-size: .3rem;color: #aaaaaa;">北京 朝阳区 4A景区</p>
						</div>
						<div class="play_position2">
							<p>￥<span style="font-size: .6rem;color:#d30775;">39.9</span>起</p>
							<del>￥260</del>
						</div>
					</a>
				</div>
				<div class="play">
					<a href="javascript:;">
						<img src="static/menpiaoimg/371e5cce-0032-402e-8ff9-852372588788_480_320.jpg">
						<img src="static/menpiaoimg/sign2.png" class="play_position1">
						<div>
							<p style="margin: 0;">北京欢乐谷</p>
							<p>
								<span class="span1">驴悦亲子</span>
								<span class="span2">优惠</span>
								<span class="span2">反￥5</span>
							</p>
							<p>95.8%满意</p>
							<p style="font-size: .3rem;color: #aaaaaa;">北京 朝阳区 4A景区</p>
						</div>
						<div class="play_position2">
							<p>￥<span style="font-size: .6rem;color:#d30775;">39.9</span>起</p>
							<del>￥260</del>
						</div>
					</a>
				</div>
			</div>
			<a href="javascript:;">
				<p>更多北京景点</p>
			</a>
		</div>
		<div class="city">
			<div class="tatle border_bottom margin_top">
				<p>热门景点</p>
			</div>
			<ul>
				<a href="javascript:;">
					<li>天津</li>
				</a>
				<a href="javascript:;">
					<li>天津</li>
				</a>
				<a href="javascript:;">
					<li>天津</li>
				</a>
				<a href="javascript:;">
					<li>天津啊</li>
				</a>
				<a href="javascript:;">
					<li>天津啊</li>
				</a>
				<a href="javascript:;">
					<li>天津</li>
				</a>
				<a href="javascript:;">
					<li>天津</li>
				</a>
				<a href="javascript:;">
					<li>天津</li>
				</a>
				<a href="javascript:;">
					<li>天津</li>
				</a>
				<a href="javascript:;">
					<li>天津</li>
				</a>
				<a href="javascript:;">
					<li>天津</li>
				</a>
			</ul>
		</div>
		<div>
			<div class="tatle margin_top height">
				<p class="bg">境外门票</p>
				<p><a href="javascript:;">查看更多境外门票<span></span></a></p>
			</div>
		</div>
		<div class="fixed2" @click="click">
			顶部
		</div>
	</div>
</template>
<script>
	

	export default{
		data(){
			return{
				
			}
		},
		methods:{
			click(){
				let out;
				function bibao(){
					clearTimeout(out)
					out = setTimeout(function(){
						document.body.scrollTop-=50
						if (document.body.scrollTop==0) {
							document.body.scrollTop=0;
							clearTimeout(out)
						}else{
							bibao();
						}
					},1)
				}
				bibao()
			}
		},
		computed:{

		},
		mounted(){
			var shake = (function(){
				var timer = new Date();
				return function(callback,time){
					if (new Date - timer > time) {
						timer = new Date;
						callback()
					}
				}
			})();
			function scroll(){
				shake(function(){
					let top = document.body.scrollTop
					let Odiv = document.querySelectorAll(".play")
					let fixed = document.querySelector(".fixed2")
					for (let i = Odiv.length - 1; i >= 0; i--) {
						let divTop = Odiv[i].offsetTop
						let vTop = window.innerHeight
						if (top+vTop>=divTop) {
							Odiv[i].className="play animet";
						}
					}
					if (top>900){
						fixed.style.display="block"
					}else if(top<=900){
						fixed.style.display="none"
					}
				},200)
			}
			document.body.onscroll = scroll
			document.body.scrollTop = 0;
		}
	}

</script>
<style scoped>
img{
	display: block;
}
.body{
	background: #efeff7;
	padding-top: 2.7rem;
	overflow: hidden;
}
.fixed{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	background: #efeff7;
}
.header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .3rem;
	background: #fff;
	font-size: .5rem;
}
.header div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 17%;
}
.header a img{
	width:100%;
}
.search{
	padding: .3rem;
	font-size: .4rem;
}
.search_div{
	display: flex;
	align-items: center;
	background: #fff;
}
.after{
	position: relative;
	width: 20%;
	text-align: center;
	color: #d30775;
}
.after::after{
	content: "";
	width: .1rem;
	height: .5rem;
	position: absolute;
	border-left: 2px solid #ddd;
	top: .05rem;
	margin-left: 1rem;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}
.after span::after{
	content: "";
	width: .2rem;
	height: .2rem;
	border-top: 2px solid #d30775;
	border-right: 2px solid #d30775;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	position: absolute;
	top: 25%;
	right: .05rem;
}
.input{
	width: 80%;
}
.input input{
	border: none;
	background: url(../../../static/menpiaoimg/fangdajing.png)no-repeat .8rem center;
	height: .8rem;
	width: 100%;
	text-indent: 1.5rem;
	font-size: .35rem;
}
.slide img{
	width: 100%;
}
.tatle{
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 .6rem 0 .2rem;
	font-size: .35rem;
}
.tatle p{
	height: .8rem;
	display: flex;
	align-items: center;
	position: relative;
}
.tatle span::after{
	content: "";
	width: .2rem;
	height: .2rem;
	border-top: 2px solid;
	border-left: 2px solid;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	position: absolute;
	top: 38%;
	right: -.3rem;
}
.border_bottom{
	border-bottom: 2px solid #dadada;
}
.box{
	padding: .2rem;
	background: #fff;
	overflow-x: scroll;
}
.scroll_x{
	width: auto;
	display: flex;
	flex-flow: nowrap;
}
.scroll_x a{
	margin-right: .2rem;
	display: inline-block;
	font-size: .35rem;
	position: relative;
}
.scroll_x a div{
	border: 1px solid #dadada;
	border-top: none;
	padding: .2rem;
}
.scroll_x .p{
	margin-top: .2rem;
}
.scroll_x .p span{
	color: #d30775;
}
.scroll_x_position{
	position: absolute;
	top : 0;
	left: 0;
	background: #ff720e;
	color: #fff;
	border-radius: 0 0 10px 0;
	font-size: .3rem;
	display: inline-block;
	padding: 0 .1rem;
}
.margin_top{
	margin-top: 0.266667rem;
}
.banner img{
	width: 100%;
}
.menu{
	background: #fff;
	font-size: .35rem;
}
.menu>p{
	line-height: .5rem;
	padding: .2rem 0rem .2rem .3rem;
}
.menu .flex{
	overflow-x: scroll;
	padding: .2rem .3rem;

}
.flex>div{
	display: flex;
	flex-flow: nowrap row;
	justify-content: space-between;
	width: 1300px;
}
.flex>div a{
	display: flex;
	flex-flow: wrap column;
	align-content: center;
	align-items: center;
}
.play{
	background: #fff;
	padding: .2rem .3rem;
	border-bottom: 1px solid #dadada;
	transform: translate(0,50px);
}
.play a{
	display: flex;
	flex-flow: nowrap;
	position: relative;
	font-size: .35rem;
}
.play a img{
	width: 2.533333rem;
	height: 2.053333rem;
}
@-webkit-keyframes fadeIn{
	0% {
		opacity: 0; /*初始状态 透明度为0*/
	}
	/*50% {
		opacity: 0.5;
	}*/
	100% {
		opacity: 1; /*结尾状态 透明度为1*/
	}
}
.play a div{
	margin-left: .1rem;
}
.play a .play_position1{
	width: 1.213333rem;
	height: 0.4rem;
	position: absolute;
	top: 0;
	left: 0;
}
.play a div p{
	margin-top: .1rem;
}
.span1{
	border: 1px solid #ff740d;
	padding: .02rem .1rem;
	color: #ff740d;
	font-size: .3rem;
}
.span2{
	border: 1px solid #d30775;
	padding: .02rem .1rem;
	color: #d30775;
	font-size: .3rem;
}
.play_position2{
	position: absolute;
	right: 0;
	top: 20%;
	display: flex;
	flex-flow: wrap column;
	align-items: flex-end;
}
.play_position2 del{
	color: #aaaaaa;
}
.content>a p{
	height: 1rem;
	width: 100%;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: .4rem;
}
.city ul{
	background: #fff;
	padding: .3rem;
	overflow-x: scroll;
	white-space: nowrap;
}
.city ul li{
	display: inline-block;
	border: 1px solid;
	padding: .2rem .4rem;
	margin-right: .1rem;
}
.height{
	height: 1.3rem;
	margin-bottom: 0.266667rem;
}
.bg{
	font-size: .4rem;
	padding-left: 1rem;
	background: url(../../../static/menpiaoimg/abroad.png)no-repeat 0 center;
	background-size: .6rem;
}
.fixed2{
	width: 1.2rem;
	height: 1.2rem;
	background: rgba(211,7,117,.8) url(../../../static/menpiaoimg/top.png)no-repeat center 0;
	background-size: .7rem;
	border-radius: 50%;
	position: fixed;
	top: 78%;
	right: 4%;
	color: #fff;
	text-align: center;
	line-height: 1.6rem;
	display: none;
}
.animet{
	background: #fff;
	padding: .2rem .3rem;
	border-bottom: 1px solid #dadada;
	transform: translate(0,0);
	transition: all .7s;
}
.animet img{
	-webkit-animation-name: fadeIn; /*动画名称*/
	-webkit-animation-duration: 1s; /*动画持续时间*/
	-webkit-animation-iteration-count: 1; /*动画次数*/
	-webkit-animation-delay: 0s; /*延迟时间*/
}
</style>